$(".man-col").mouseenter(function () {
    $(".man-list").stop(true)
    $(".man-list").animate({
        height: 'show'
    }, 200)
});
$(".man-col").mouseleave(function () {
    $(".man-list").stop(true)
    $(".man-list").animate({
        height: 'hide'
    }, 200)
});
$(".woman-col").mouseenter(function () {
    $(".woman-list").stop(true)
    $(".woman-list").animate({
        height: 'show'
    }, 200)
});
$(".woman-col").mouseleave(function () {
    $(".woman-list").stop(true)
    $(".woman-list").animate({
        height: 'hide'
    }, 200)
});
$(".parts").mouseenter(function () {
    $(".parts-list").stop(true)
    $(".parts-list").animate({
        height: 'show'
    }, 200)
});
$(".parts").mouseleave(function () {
    $(".parts-list").stop(true)
    $(".parts-list").animate({
        height: 'hide'
    }, 200)
});



// 吸顶菜单
window.onscroll = function () {
    var scroollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scroollTop >60) {
       $(".header_con").css({'position':'fixed','top':'0','z-index':'99'}),
       $(".img_logo>img").css({'width':'70','height':'38'})
    } else {
    $(".header_con").css({'position':'relative'}),
    $(".img_logo>img").css({'width':'170','height':'94'})
}
}


//   锚点
// 因为页面卷动在吸顶菜单上写过，所以不用再次声明
// 回到顶部;
// 1. 点击回到顶部按钮;
// 2. 设置scrollTop 为0;
$(".fa-angle-up").click(function(){
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
})




// 渲染页面

$.ajax("http://localhost:8888/json/a.json",{
    dataType: "json",
    type: "GET"
})
.then( function(res){
   render(res);
})

function render( res ){
    var html = "";
    res.forEach(function(slide){
        // console.log(slide)
          html += ` <div class="item">
                            <div class="img_box">
                                  <img style="height:${slide.img.height * (235 / slide.img.width)}px" src="${slide.img}" alt="">
                            </div>
                            <div class="title_box">
                                  <h2>${slide.price}</h2>
                            </div>
                      </div>`
    })
    
    $(".wrapper").append(html);
}